<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<%-- <link rel = "stylesheet" href = "css/zhuce3.css?_=<%=new java.util.Date().getTime() %>" --%>
 <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
 <style type="text/css">
 *{
	margin:0;
	padding:0px;
}

.userName{
	width:300px;
	height:30px;
}

#neirong{
	width:60%;
	margin:0 auto;
}
#baidi{
	width:65%;
	margin:0 auto;
	background-color:#fff;
	text-align:center;
	height:700px;
}
.default{
	color:red;
	font-size:12px;
	display:bolck;
	text-aling:left;
}
#form-itemGroup span{
	color: red;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    text-aling:letf;
    dispaly:bolck;
}
#shang{
	width:430px;
	height:40px;
	margin:0;
	padding:0;
	background-color:#ca5252;
	color:#fff;
	text-aling:center;
	line-height:40px;
	margin-left:78px;
	margin-bottom:30px;
	
}
#hong{
	background-color:#ca5252;
	color:#fff;
	line-height:40px;
	text-aling:center;
}
#bai{
	background-color:#fff;
	color:#000;
	line-height:40px;
	text-aling:center;
}
#neirong{
	padding-top:40px;
	text-aling:center;
}
img{
	width:80%;
}
.divBtn{
	width:300px;
	height:40px;
	border:0px;
	color:#fff;
	background-color:#ca5252;

}
 
 </style>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
function checkForm(){ 
	  var nametip = checkUserName(); 
	  var passtip = checkPassword();  
	  var conpasstip = ConfirmPassword(); 
	  var phonetip = checkPhone(); 
	  return nametip && passtip && conpasstip && phonetip; 
	  } 
	  //验证用户名   
	  function checkUserName(){ 
	  var username = document.getElementById('userName'); 
	  var errname = document.getElementById('nameErr'); 
	  var pattern = /^\w{3,}$/;  //用户名格式正则表达式：用户名要至少三位 
	  if(username.value.length == 0){ 
	    errname.innerHTML="用户名不能为空"
	    errname.className="error"
	    return false; 
	    } 
	  if(!pattern.test(username.value)){ 
	    errname.innerHTML="用户名不合规范"
	    errname.className="error"
	    return false; 
	    } 
	   else{ 
	     errname.innerHTML="OK"
	     errname.className="success"; 
	     return true; 
	     } 
	  } 
	  //验证密码   
	function checkPassword(){ 
	  var userpasswd = document.getElementById('userPasword'); 
	  var errPasswd = document.getElementById('passwordErr'); 
	  var pattern = /^\w{4,8}$/; //密码要在4-8位 
	  if(!pattern.test(userpasswd.value)){ 
	    errPasswd.innerHTML="密码不合规范"
	    errPasswd.className="error"
	    return false; 
	    } 
	   else{ 
	     errPasswd.innerHTML="OK"
	     errPasswd.className="success"; 
	     return true; 
	     } 
	  } 
	  //确认密码 
	  function ConfirmPassword(){ 
	  var userpasswd = document.getElementById('userPasword'); 
	  var userConPassword = document.getElementById('userConfirmPasword'); 
	  var errConPasswd = document.getElementById('conPasswordErr'); 
	  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
	    errConPasswd.innerHTML="上下密码不一致"
	    errConPasswd.className="error"
	    return false; 
	    } 
	   else{ 
	     errConPasswd.innerHTML="OK"
	     errConPasswd.className="success"; 
	     return true; 
	     }    
	  } 


	//验证手机号
	  function checkPhone(){ 
	  var userphone = document.getElementById('userPhone'); 
	  var phonrErr = document.getElementById('phoneErr'); 
	  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
	  if(!pattern.test(userphone.value)){ 
	    phonrErr.innerHTML="手机号码不合规范"
	    phonrErr.className="error"
	    return false; 
	    } 
	   else{ 
	     phonrErr.innerHTML="OK"
	     phonrErr.className="success"; 
	     return true; 
	     } 
	  } 
</script>
 
</head>
<body>
<div style = "width : 100%; background-color:#f3f3f3;height:1200px; ">
<p style = "font-size:30px;color:#ca5252;padding-left:230px;">網易<span style = "color:#000;font-size:26px;">邮箱账号</span><span style = "margin-left:600px; height:120px;line-height:120px;color:#999;font-size:18px;">已有账号？<a href = " "style = "color:#c91623;text-decoration:none;">登录</a></span></p>
			
	<div id="baidi">
	
		<div id ="neirong">
		
			<form action="zhuce.html" onSubmit="return checkForm()" method="post">
			<div id = "shang">
				账号注册
			</div>
		    <div id="form-itemGroup"> 
		      <label for="userName">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label> 
		      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()" name="name"> 
		      <br><span class="default" id="nameErr"></span> 
		    </div> 
		    <div id="form-itemGroup"> 
		      <label for="userPasword">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label> 
		      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()" name="password"> 
		      <br><span class="default" id="passwordErr"></span> 
		    </div> 
		    <div id="form-itemGroup"> 
		      <label for="userConfirmPasword">确认密码：</label> 
		      <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()" name="password2"> 
		      <br><span class="default" id="conPasswordErr"></span> 
		    </div> 
		    <div id="form-itemGroup"> 
		      <label for="userPhone">手机号码：</label> 
		      <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()" name="pione"> 
		      <br><span class="default" id="phoneErr"></span> 
		    </div> 
		    <div style = "margin-left:110px; margin-bottom:60px;"> 
		     <button type="submit" class="divBtn">注册</button> 
			
			
		    </div> 
		   </form> 
		</div>
		<img alt="" src="images/1.png" >
		
	</div>
</div>

</body>
</html>